import {CSSProperties, PropType} from 'vue'
import {CnMediumSpan} from './text'

export const CModal = defineComponent({
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: String
  },
  emits: {
    'update:visible': (bol: boolean) => true
  },
  setup(props, {emit}) {
    const state = reactive({
      visible: false
    })

    watch(
      () => props.visible,
      n => {
        state.visible = n
      },
      {
        immediate: true
      }
    )

    watch(
      () => state.visible,
      n => {
        emit('update:visible', n)
      }
    )
    return () => (
      <a-modal v-model={[state.visible, 'visible']} title={props.title || '标题'}></a-modal>
    )
  }
})

export type ChangeVisible = (bol: boolean) => void
export const CFormModal = defineComponent({
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: String,
    style: Object as PropType<CSSProperties>,
    centered: {
      type: Boolean,
      default: true
    }
  },
  emits: {
    'update:visible': (bol: boolean) => true
  },
  setup(props, {emit, slots}) {
    const state = reactive({
      visible: false
    })

    watch(
      () => props.visible,
      n => {
        state.visible = n
      },
      {
        immediate: true
      }
    )

    watch(
      () => state.visible,
      n => {
        emit('update:visible', n)
      }
    )

    function changeVisible(bol: boolean) {
      state.visible = bol
    }

    return () => (
      <a-modal
        v-model={[state.visible, 'visible']}
        centered={props.centered}
        afterClose={() => {}}
        title={
          slots.title ? (
            slots.title()
          ) : props.title ? (
            <CnMediumSpan>{props.title}</CnMediumSpan>
          ) : (
            ''
          )
        }
        footer={null}
        style={Object.assign({}, props.style)}
      >
        {slots.default?.(changeVisible)}
      </a-modal>
    )
  }
})
